<template>
	<view class="good_list_wai">
		<block v-for="(item,index) in goodsList" :key="item.cid">
				 
					 <myGoods :goods="item">{{item}}</myGoods>
		</block>
		<!-- <view class="good_list_item"  > -->
		 <!-- 	<view class="good_list_item_left">
		 		<image :src="item.goods_small_logo || defaultPic" style="width: 200rpx; height:120rpx;" mode="aspectFit"></image>
		 	</view>
			<view class="good_list_item_right">
				<view class="good_list_item_right_top">
					{{item.goods_name}}
				</view>
				<view class="good_list_item_right_bootom">
					{{item.goods_price|price}}
				</view>
			</view> -->
			<!-- <myGoods :goods="item">{{item}}</myGoods>
		 </view> -->
		 
	</view>
	
</template>

<script>
	import myGoods from "../../components/myGoods/myGoods.vue";
	export default {
		components:{
			myGoods
		},
		data() {
			return {
				isLoadding:false,
				//请求参数对象
				queryObj:{
					query:"",
					cid:"",
					pagenum:1,
					pagesize :10
				},
				//声明存储请求的数据
				goodsList:[],
				//实现分页	
				total:0,
				pagenum:0,
				//当该商品没有图片的时候使用默认的图片地址
				defaultPic:"https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png"
					
				
			};
		},
		onLoad(options){
			this.queryObj.query = options.query || "";
			this.queryObj.cid = options.cid || "";
			//获取商品列表
			this.goodslist();
		},
		methods:{
			//获取商品列表数据的方法
		async goodslist( cb ){
			//打开节流阀
			this.isLoadding = true;
			let{data:res}= await uni.$http.get("/api/public/v1/goods/search",this.queryObj);
			//当请求完成的时候关闭节流阀
			this.isLoadding = false;
			
			if(res.meta.status != 200) return uni.$showMsg();
			//新的数据和旧数据合并
			this.goodsList = [...this.goodsList, ...res.message.goods];
			// res.message.goods;
			this.total = res.message.total;
			this.pagenum = res.message.pagenum;
			cb && cb();
					
		}
		},
		filters:{
			price(pri){
				var pris = pri.toFixed(2)
				return '￥'+pris;
			}
		},
		onReachBottom(){
			//如果当前请求还在发起中就不会发起新的请求，
			
			if(this.queryObj.pagenum * this.queryObj.pagesize >= this.total ) return uni.$showMsg("数据加载完成");
			if(this.isLoadding)  return uni.$showMsg("数据加载中");
			// 触发页面页码加一
			this.queryObj.pagenum += 1;
			//重新调用 获取数据的方法 获取后面的数据
			this.goodslist();
		},
		onPullDownRefresh(){
			//监听下拉事件
			this.queryObj.pagenum = 1;
			this.total = 0;
			this.isLoadding = false;
			this.goodsList= [];
			//重新发起请求
			console.log("下拉刷新");
			this.goodslist( ()=> uni.stopPullDownRefresh());
		}
		
	}
</script>

<style lang="scss" >
		// .good_list_item{
		// 	width: 100%;
		// }
		// .good_list_item {
		// 	width: 100%;
		// 	display:flex;
		// 	justify-content:space-between;
		// 	align-items: center;
		// 	height: 130rpx;
		// 	margin: 10px 0px;
			
		// }
		// .good_list_item_right{
		// 	flex-direction: column;
		// 	display: flex;
		// 	justify-content: space-between;
		// 	align-items: flex-start;
		// 	margin-left: 16rpx;
		// }
		// .good_list_item_left {
		// 	width: 40%;
			
		// }
		// .good_list_item_left image {
		// 	width: 100% !important;
		// 	height: auto !important;
		// }
		// .good_list_item_right_bootom {
		// 	color:#ab3761;
		// }
		// .good_list_item_right_top{
		// 	color:#070707;
		// }
		// .good_list_item_right{
		// 	height: 100%;
		// 	font-size: 14px;
		// 	color: #333;
		// 	border-bottom:1px solid #f5f5f5 ;
		// }
</style>
